<template>
  <div>
    <div class="notshop">
      <div>
        <img class="image1" src="http://47.115.51.185/h5/img/noCart.6f2abfef.png" />
      </div>
      <div>
        <van-divider
          :style="{
            color: '#000',
            borderColor: '#959595',
            padding: '0 1.6rem',
          }"
        >
          为你推荐
        </van-divider>
      </div>
      <div v-if="list" class="recommend_of_you">
        <router-link tag="div" :to="`ProductDetails/${lists.id}`" class="shopping" v-for="lists in list" :key="lists.id">
          <van-image class="image2" :src="lists.image"></van-image>
          <span>{{ lists.store_name }}</span>
          <p>￥{{ lists.price }}</p>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.axios
      .get("/product/hot?page=h1&limit=20", {
        headers: {
          "Authori-zation": "Bearer " + localStorage.getItem("token"),
        },
      })
      .then((re) => {
        this.list = re;
      });
  },
};
</script>


<style lang="less" scoped>
.notshop {
  margin-top: 15vh;

  .image1 {
    display: block;
    width: 207px;
    height: 168px;
    margin: 0 auto;
  }

  .recommend_of_you {
    padding: 20px 15px;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .shopping {
      width: 165px;
      margin-bottom: 10px;

      .image2 {
        width: 165px;
        height: 165px;
      }
    }

    span {
      width: 100%;
      display: block;
      font-size: 0.38rem;
      color: #282828;
      margin: 0.2rem 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    p {
      font-size: 0.38rem;
      color: #fc4141;
      // margin-bottom: 10px;
    }
  }
}
</style>